import {useEffect} from "react"
import { observer } from "mobx-react-lite"
import { Form,Input,Button,message} from 'antd'
import request from 'service/fetch'
import styles from './index.module.scss'

const layout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 16 },
}

const tailLayout = {
    wrapperCol: { offset: 4},
}

const UserProfile = () => {
    const [form] = Form.useForm()
    useEffect(() => {
        request("/api/user/detail").then((res:any) => {
           if(res?.code === 0) {
               form.setFieldsValue(res?.data?.userInfo)
           }else{
            message.error(res?.msg)
           }
        })
    }, [form])
    const hanleSubmit = (values:any) => {
        request.post("/api/user/update",{...values}).then((res:any) => {
            if(res?.code === 0) {
                message.success('修改成功')
            }else{
                message.error(res?.msg || '修改失败')
            }
        })
    }
    return <div className='content-layout'>
        <div className={styles.userProfile}>
            <h2>个人资料</h2>
            <Form {...layout} form={form} className={styles.form} onFinish={hanleSubmit}>
               <Form.Item name="nickname" label="用户名">
                <Input placeholder="请输入用户名"></Input>
               </Form.Item>
               <Form.Item name="job" label="职位">
                <Input placeholder="请输入职位"></Input>
               </Form.Item>
               <Form.Item name="introduce" label="个人介绍">
                <Input placeholder="请输入个人介绍"></Input>
               </Form.Item>
               <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">保存修改</Button>
               </Form.Item>
            </Form>
        </div>
    </div>
}

export default observer(UserProfile)
